<template>
  <div class="lelr-page-wrap">
    <div class="lelr-top">
      <x2-opt label=""> <el-input v-model="keyword" style="width: 200px" placeholder="关键字检索"></el-input> </x2-opt>
      <x2-opt> <el-button @click="handleRefresh" type="success">检索/刷新</el-button> </x2-opt>
      <x2-opt> <el-button @click="handleAddApp" type="primary">创建应用</el-button> </x2-opt>
      <x2-opt margin="0 0 0 40px"> <el-button disabled @click="handleImport" type="primary">批量导入</el-button> </x2-opt>
      <x2-opt> <el-button disabled @click="handleOutput" type="primary">导出/备份</el-button></x2-opt>
    </div>
    <div class="lelr-main">
      <div class="lelr-main-left">
        <div class="app-list">
          <div v-if="applist.length == 0" style="text-align: center; margin-top: 60px" class="content-tips">
            暂无应用信息，<el-button @click="handleAddApp" type="primary">创建</el-button> 一个新应用
          </div>
          <template v-else>
            <div v-for="item in applist" :key="item.id" class="app-card-wrap">
              <div @click="handleSelectApp(item)" :class="currentApp.id == item.id ? 'app-card app-selected' : 'app-card'">
                <svg-icon style="flex-shrink: 0" :fill="currentApp.id == item.id ? '#FFF' : '#409EFF'" icon-class="example" />
                <span class="app-name" :style="currentApp.id == item.id ? 'color:#FFF' : ''">{{ item.appName }}</span>
              </div>
            </div>
            <div v-for="inx in 10" :key="inx" class="app-card-wrap" style="height: 0px"></div>
          </template>
        </div>
      </div>
      <div v-if="!isSelectedApp" class="lelr-main-right">
        <div style="text-align: center; margin-top: 60px" class="content-tips">未选中应用</div>
      </div>
      <div v-else class="lelr-main-right">
        <div class="r-top">
          <x2-opt> <el-button @click="handleGoToManage" :disabled="isNewRecord" type="primary">开发应用</el-button> </x2-opt>
          <!-- <x2-opt> <el-button @click="handleTmp" :disabled="isNewRecord" type="primary">tmp</el-button> </x2-opt> -->
          <x2-space />
          <x2-opt> <el-button @click="handleFormSubmit" type="primary">保存提交</el-button> </x2-opt>
          <x2-opt> <el-button @click="handleDeleteApp" :disabled="isNewRecord" type="danger">删除应用</el-button> </x2-opt>
        </div>
        <div class="r-bottom">
          <x2-form ref="editform" :is-new="isNewRecord" :form-config="formConfig"></x2-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const isdebug = true

import { formConfig } from './formConfig'
import DeptList from './deptList.vue'
import lodash from 'lodash'
import dayjs from 'dayjs'
export default {
  name: 'AppList',
  data() {
    return {
      keyword: '',
      formConfig,
      currentApp: {},
      applist: [],
      isNewRecord: false,
    }
  },
  computed: {
    isSelectedApp() {
      return JSON.stringify(this.currentApp) == '{}' ? false : true
    },
  },
  mounted() {
    this.handleRefresh()
    // isdebug && console.log('uuid', uuid)
  },
  methods: {
    async isExistNotSave(item = null) {
      try {
        if (this.isNewRecord) {
          console.log('11111111111')
          const res = await this.$confirm('有一个新建应用正在编辑，是否继续当前操作？', '注意', { type: 'warning' })
          console.log('2222222')
        } else if (!this.isSelectedApp) {
          console.log('3333333')
          return true
        } else {
          console.log('44444444444')
          if (item != null && this.currentApp.id == item.id) return false
          if (this.$refs.editform.isModify()) {
            const res = await this.$confirm('有一个新建应用正在编辑，是否继续当前操作？', '注意', { type: 'warning' })
          }
        }
        return true
      } catch (e) {
        console.log(e)
        return false
      }
    },

    async handleRefresh() {
      const res = await this.$request({
        url: '/lowcode/getDataBySql',
        method: 'post',
        data: { sqlid: '应用信息' },
      })
      this.applist = res.list
      if (res.list.length > 0 && !this.isSelectedApp) {
        this.handleSelectApp(res.list[0])
      }
    },
    async handleSelectApp(item) {
      const isContinue = await this.isExistNotSave(item)
      if (!isContinue) return

      const res = await this.$request({
        url: '/lowcode/getDataBySql',
        method: 'post',
        data: { sqlid: '应用信息', where: `id='${item.id}'` },
      })

      this.currentApp = res.list[0]
      this.isNewRecord = false
      setTimeout(() => {
        this.$refs.editform.init(this.currentApp)
      }, 0)
    },
    async handleAddApp() {
      const isContinue = await this.isExistNotSave()
      if (!isContinue) return
      this.currentApp = {
        id: this.$uuid(),
        createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        appName: '',
        description: '',
        icon: '',
        category: 'b673b073-6c5f-40e0-af0e-1c6cc4de345b',
        isLock: 'N',
      }
      this.isNewRecord = true

      setTimeout(() => {
        this.$refs.editform.init(this.currentApp)
      }, 0)
    },
    async handleFormSubmit() {
      const res = await this.$refs.editform.submit()
      if (res) {
        if (this.isNewRecord) this.isNewRecord = false
        this.handleRefresh()
      }
    },

    async handleDeleteApp() {
      console.log('handleDeleteApp')
    },
    handleImport() {},
    handleOutput() {},
    handleGoToManage() {
      this.$router.push({ name: 'AppManage', params: { id: this.currentApp.id } })
    },
    // handleTmp() {
    //   this.$router.push({ name: 'AppManage', query: { tab: 'publish' }, params: { id: this.currentApp.id } })
    // },
  },
}
</script>
<style lang="scss" scoped>
.r-top {
  height: 36px;
  display: flex;
  align-items: center;
}
.r-bottom {
  height: calc(100% - 42px);
  margin: 6px 0 0 0;
  overflow: auto;
}
.app-list {
  height: 100%;
  overflow: auto;
  display: flex;
  align-content: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  padding: 6px;
}
.app-card-wrap {
  width: 192px;
  height: 45px;
  padding: 4px;
  flex-grow: 1;
  box-sizing: border-box;
}
.app-card {
  background: #fff;
  cursor: pointer;
  width: 100%;
  height: 100%;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.12), -2px -2px 6px rgba(0, 0, 0, 0.08);
  padding: 8px;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  .app-name {
    font-size: 12px;
    margin-left: 6px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.app-selected {
  // :style="currentApp.id == item.id ? 'background:#409EFF' : ''"
  background: rgba(0, 0, 0, 0.08);
  animation: loadGradient 0.4s ease-in-out forwards;
}

@keyframes loadGradient {
  0% {
    background: rgba(24, 144, 255, 0.08);
  }
  100% {
    background: rgba(24, 144, 255, 1);
  }
}
</style>
